/**
* Created by wl
* 项目管理>持有中-详情页-投资服务
*/
<template>
    <div class="ca-box ca-box-border-top-none ca-p-20">
        <div>
            <div class="ca-title">
                <h3>服务动态</h3>
                <span class="el-m-50">筛选</span>
                <el-select v-model="service" placeholder="请选择" @change="selectService">
                    <el-option v-for="item in serviceType" :label="item.name" :value="item.id"
                            :key="item.id"></el-option>
                </el-select>
                <el-button type="primary" class="ca-m-l-10 el-right" @click="dialogVisible=true" :disabled="!isAuthIndexSee" size="small"><span>添加</span></el-button>
                <!-- <button type="button" class="ca-btn ca-btn-default ca-tp-8 ca-m-l-10 el-right" @click="dialogVisible=true" :disabled="!isAuthIndexSee"><i class="fa fa-plus ca-m-r-5"></i><span>添加</span></button> -->
                <div class="clear"></div>
            </div>
            <div class="ca-box ca-m-t-28 ca-p-20" v-if="serviceList.length>0">
                <div v-for="(item, index) in serviceList" :key="index">
                    <div v-if="!serviceList[index].showEdit">
                        <el-row class="after-row">
                            <el-col :span="8">
                                <div class="after-form-input el-ellipsis ca-m-t-10">
                                    <span>标题：{{item.itemHoldService.title}}</span>
                                </div>
                            </el-col>
                            <el-col :span="12">
                                <div class="after-form-input ca-m-t-10">
                                    <span class="color-gray ca-m-r-15">记录人：{{item.createUserId}}</span>
                                    <span class="color-gray ca-m-r-15">服务时间：{{$moment(item.itemHoldService.serviceTime).format('YYYY-MM-DD') }}</span>
                                    <span class="color-gray">记录时间：{{$moment(item.itemHoldService.createTime).format('YYYY-MM-DD') }}</span>
                                </div>
                            </el-col>
                            <el-col :span="4" class="align-r">
                                <button type="button" @click="isShow(index, 'F')" class="ca-btn-switch ca-btn-default ca-m-l-10" v-if="serviceList[index].dropDown"><i class="el-icon-arrow-down ca-m-r-5"></i><span>收起</span></button>
                                <button type="button" @click="isShow(index, 'T')" class="ca-btn-switch ca-btn-default ca-m-l-10" v-else><i class="el-icon-arrow-up ca-m-r-5"></i><span>展开</span></button>
                                <el-button type="text" class="ca-edit-btn el-icon-edit ca-m-r-10 edit-btn" @click="editInfo(index, item)" :disabled="!isAuthIndexSee">编辑</el-button>                    
                            </el-col>
                            <el-col :span="24" class="after-form-col" v-show="serviceList[index].dropDown">
                                <div class="after-form-input">
                                    <span>服务类型：</span>
                                    <span>{{item.itemHoldService.serviceType | getNameById('itemServiceType')}}</span>
                                </div>
                                <div class="after-form-input">
                                    <span>服务记录：</span>
                                    <span>{{item.itemHoldService.serviceRecord}}</span>
                                </div>
                                <div class="after-form-input">
                                    <span>文件记录：</span>
                                </div>
                                <div class="after-form-list">
                                    <div class="ca-file-ul">
                                        <el-row class="ca-file-row" v-for="(file, fileIndex) in item.files" :key="fileIndex">
                                            <!-- <el-col :span="5"> -->
                                                <!-- <div class="ca-text-over-flow-ellipsis">{{file.fileType | getNameByType  }}</div> -->
                                            <!-- </el-col> -->
                                            <el-col :span="1">
                                                <tz-icon-file-type class="ca-m-r-5" :fileType="file.fileName"></tz-icon-file-type>
                                            </el-col>
                                            <el-col :span="15">
                                                <div class="ca-text-over-flow-ellipsis ca-pointer"
                                                    @click="previewFileCheck(file.id, file.fileName)">
                                                    <span class="ca-font-size-16 ca-pointer">{{file.fileName}}</span>
                                                </div>
                                            </el-col>
                                            <el-col :span="3" class="ca-pull-right ca-align-right">
                                                <a class="ca-download ca-m-r-10" @click="downloadFile(file.id)"></a>
                                                <!-- <el-button class="ca-table-btn" @click="deleteFile(file.id, fileIndex, index)">
                                                    <i class="fa fa-times"></i>
                                                </el-button> -->
                                            </el-col>
                                        </el-row>
                                    </div>
                                </div>
                            </el-col>
                        </el-row>
                    </div>
                    <csShareholder v-else :showBtn="true" @close="close" :index="index" :serviceInfo="item" @update="update" @addSave="addSave"></csShareholder>
                </div>
            </div>
            <!-- <csInvestmentDynamics :serviceList="serviceList" v-if="serviceList.length != 0" @delClose="close"></csInvestmentDynamics> -->
            <csAddDynamics :dialogVisible="dialogVisible" @close="dialogVisible = false" @save="addSave" ></csAddDynamics>
        </div>
    </div>
</template>
<script type="text/ecmascript-6">
    import {api} from '../api';
    import {STATUS_HTTP_SUCCESS, apiHttp} from '__service/csHttp';
    import mined from '__components/file-list/mixin';
    import { addRemind, isNoAuth } from '__service/utils';
    export default {
        mixins: [mined],
        data() {
            return {
                isAuthIndexSee: isNoAuth('持有中项目-投资服务-编辑'),
                fileType: '10052',
                dialogVisible: false,
                serviceType: [{name: '全部', id: ''}, ...this.$store.state.user.dictionaryMap.itemServiceType],
                service: '',
                ind: null,
                serviceList: [],
            }
        },
        watch: {
        },
        props: {},
        mounted() {
            this.getInfo()
        },
        methods: {
            async addSave() {
                this.dialogVisible = false
                await this.getInfo();
                // 添加小红点
                await addRemind({
                    dataId: this.$route.params.itemId, // 业务id
                    dataTab: 4, // tab页顺序 head 也为0 新建为'-1'
                    dataType: 2, // 1拟投资项目,2已投资项目,3母基金,4拟设立基金,5已设立基金,6客户,7潜在项目
                });
                // 根据第三方组件来调用 父组件中定义的方法 重新获取小红点
                this.$root.Dot.$emit('getDotList');
                // 添加小红点 end
            },
            // 更新
            update() {
                apiHttp(api.CHECK_SERVICE, {itemId: this.$route.params.itemId}).then(ret => {
                    if (ret.resCode === STATUS_HTTP_SUCCESS) {
                        ret.data.itemHoldServiceVO.map(item => {
                            if (this.ind !== null) {
                                item.dropDown = false
                                item.showEdit = false
                                ret.data.itemHoldServiceVO[this.ind].dropDown = true
                            } else {
                                item.dropDown = false
                                item.showEdit = false
                            }
                        })
                        this.serviceList = ret.data.itemHoldServiceVO
                        this.addSave()
                    }
                })
            },
            // 筛选
            selectService() {
                this.serviceList = []
                apiHttp(api.CHECK_SERVICE, {itemId: this.$route.params.itemId}).then(ret => {
                    if (ret.resCode === STATUS_HTTP_SUCCESS) {
                        ret.data.itemHoldServiceVO.map(item => {
                            if (this.ind !== null) {
                                item.dropDown = false
                                item.showEdit = false
                                ret.data.itemHoldServiceVO[this.ind].dropDown = true
                            } else {
                                item.dropDown = false
                                item.showEdit = false
                            }
                        })
                        ret.data.itemHoldServiceVO.map(item => {
                            if (this.service === '') {
                                this.serviceList = ret.data.itemHoldServiceVO
                            } else if (this.service === item.itemHoldService.serviceType) {
                                this.serviceList.push(item)
                            }
                        })
                    }
                })
            },
            getInfo() {
                apiHttp(api.CHECK_SERVICE, {itemId: this.$route.params.itemId}).then(ret => {
                    if (ret.resCode === STATUS_HTTP_SUCCESS) {
                        if (ret.data.itemHoldServiceVO.length > 0) {
                            ret.data.itemHoldServiceVO.map(item => {
                                    item.dropDown = false
                                    item.showEdit = false
                            })
                        }
                        this.serviceList = ret.data.itemHoldServiceVO
                        // 记录人
                        ret.data.itemHoldServiceVO.map((item, index) => {
                            this.$store.state.user.department.userEntityList.map(val => {
                                if (item.itemHoldService.createUserId === '1') {
                                    this.serviceList[index].createUserId = 'admin'
                                } else {
                                    if (item.itemHoldService.createUserId === val.id) {
                                        this.serviceList[index].createUserId = val.userName
                                    }
                                }
                            })
                        })
                    }
                })
            },
            editInfo(index) {
                this.serviceList[index].showEdit = true
                this.ind = index
            },
            close(index) {
                this.dialogVisible = false
                this.serviceList[index].showEdit = false
                this.serviceList[index].dropDown = true
            },
            isShow(index, type) {
                if (type === 'F') {
                    this.serviceList[index].dropDown = false;
                } else {
                    this.serviceList[index].dropDown = true;
                }
            },
            async save() {
                this.dialogVisible = false
                // 添加小红点
                await addRemind({
                    dataId: this.$route.params.itemId, // 业务id
                    dataTab: 4, // tab页顺序 head 也为0 新建为'-1'
                    dataType: 2, // 1拟投资项目,2已投资项目,3母基金,4拟设立基金,5已设立基金,6客户,7潜在项目
                });
                // 根据第三方组件来调用 父组件中定义的方法 重新获取小红点
                this.$root.Dot.$emit('getDotList');
                // 添加小红点 end
            },
        },
        components: {
            csAddDynamics: require('./investment-dynamics/add'),
            csShareholder: require('./investment-dynamics/edit'),
            csFileList: require('__components/file-list/index'),
        },
    }
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
.el-right {
    float: right;
}
.el-m-50 {
    margin-left: 50px;
    margin-right: 20px;
}
.table-btn {
    border-radius: 50%;
    width: 30px;
    height: 30px;
    color: #d70c18;
    font-size: 12px;
    padding: 0;
    float: right;
}
.edit-btn {
    float: right;
    cursor: pointer;
    margin-left: 10px;
}
.dynamics-btn {
    width: 500px;
    overflow: hidden;
    text-align: left;
}
.dynamics-head {
    width: 98%;
    border-bottom: 1px solid #666666;
    height: 30px;
}
.dynamics-body {
    margin-top: 20px;
}
.dynamics-left-50 {
    margin-left: 50%;
}
.dynamics-left-20 {
    margin-left: 20px;
}
.dynamics-type {
    font-size: 20px;
    font-weight: normal;
}
.dynamics-type p{
    text-indent: 50px;
}
.after-form-input div {
    display: inline-block !important;
    width: initial;
}
.after-form-input span {
    display: inline-block;
    font-size: 14px;
}
.after-row {
    padding: 20px 20px;
    border-top: 1px solid #ccc;
}
.after-row:hover {
    background: #ededed;
}
.after-row:last-child {
    border-bottom: 1px solid #ccc;
}
.after-form-col {
    margin-top: 15px;
    background: #fff;
    padding: 20px;
    border: 1px solid #ccc;
}
.after-form-col div {
    margin-bottom: 8px;
}
.ca-m-l-10 {
    margin-left: 44px;
    margin-top: 5px;
}
.el-ellipsis span {
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    width: 95%;
}
</style>